<template>
  <el-radio-group v-model="internalValue" :disabled="disabled">

    <el-radio :label="item[value]" v-for="item in optionList">{{item[lable]}}</el-radio>

  </el-radio-group>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const emits = defineEmits(["update:modelValue", "change"])
  const props = defineProps({
    modelValue: {
      type: String,
      default: "",
    },
    disabled: {
      type: String,
      default: false
    },
    optionList: {
      type: Array,
      default: () => [{
        value: 1,
        lable: 12
      },
      {
        value: 2,
        lable: 122
      },
      ],
    },
    lable: {
      type: String,
      default: 'lable'
    },
    value: {
      type: String,
      default: 'value'
    }

  });
  let internalValue = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      console.log(val);

      emits("update:modelValue", val);
    },
  });

</script>
<style lang="scss" scoped>
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    background-color: #fff !important;
  }

  ::v-deep .el-radio__inner::after {
    background-color: var(--pb-color-primary);
    width: 9px;
    height: 9px
  }
</style>
